<script type="text/javascript" src="<?=base_url($template_path.'js/jquery.jscrollpane.min.js') ?>"></script>
		<script type="text/javascript" id="sourcecode">
			$(function()
			{
				$('.scroll-pane').jScrollPane();
			});
		</script>
<!-- start details -->
<script src="<?=base_url($template_path.'js/slides.min.jquery.js') ?>"></script>
   <script>
		$(function(){
			$('#products').slides({
				preload: true,
				preloadImage: 'img/loading.gif',
				effect: 'slide, fade',
				crossfade: true,
				slideSpeed: 350,
				fadeSpeed: 500,
				generateNextPrev: true,
				generatePagination: false
			});
		});
	</script>
	<!-- start zoom -->
	<link rel="stylesheet" href="<?=base_url($template_path.'css/zoome-min.css') ?>" />
	<script type="text/javascript" src="<?=base_url($template_path.'js/zoome-e.js') ?>"></script>
	<script type="text/javascript">
		$(function(){
		$('#img1,#img2,#img3,#img4').zoome({showZoomState:true,magnifierSize:[250,250]});
	});
</script>		
<div class="mens">    
  <div class="main">
     <div class="wrap">
     	<ul class="breadcrumb breadcrumb__t"><a class="home" href="<?=site_url() ?>">Trang chủ</a> / <a href="<?=site_url('home/product_category/'.$category['id']) ?>"><?=$category['category'] ?></a> / <?=$product['name'] ?></ul>
		<div class="cont span_2_of_3">
		  	<div class="grid images_3_of_2">
						<div id="container">
							<div id="products_example">
								<div id="products">
									<div class="slides_container">
										<?php
											if($product['image'] != 'no_image.jpg')
											{
									        	echo '<a href="#"><img class="a" id="img1" src="'.base_url('upload/image/products/'.$product['image']).'" alt="" rel="'.base_url('upload/image/products/'.$product['image']).'" /></a>';
									        }
									        if($product['image1'] != 'no_image.jpg' )
									        {
												echo '<a href="#"><img class="a" id="img2" src="'.base_url('upload/image/products/'.$product['image1']).'" alt="" rel="'.base_url('upload/image/products/'.$product['image1']).'" /></a>';
											}
											if($product['image2'] != 'no_image.jpg')											
											{
												echo '<a href="#"><img class="a" id="img3" src="'.base_url('upload/image/products/'.$product['image2']).'" alt="" rel="'.base_url('upload/image/products/'.$product['image2']).'" /></a>';
											}
											if($product['image3'] != 'no_image.jpg')
											{
												echo '<a href="#"><img class="a" id="img4" src="'.base_url('upload/image/products/'.$product['image3']).'" alt="" rel="'.base_url('upload/image/products/'.$product['image3']).'" /></a>';
											}
										?>	
									</div>
									<ul class="pagination">
										<?php
											if($product['image'] != 'thum_no_image.jpg')
											{
												echo '<li><a href="#"><img src="'.base_url('upload/image/products/'.$product['thumbnail']).'" width="s-img" alt="1144953 3 2x"></a></li>';
											}												
											if($product['image1'] != 'thum_no_image.jpg')
											{
												echo '<li><a href="#"><img src="'.base_url('upload/image/products/'.$product['image1_thumb']).'" width="s-img1" alt="1144953 3 2x"></a></li>';
											}
											if($product['image2'] != 'thum_no_image.jpg')												
											{
												echo '<li><a href="#"><img src="'.base_url('upload/image/products/'.$product['image2_thumb']).'" width="s-img2" alt="1144953 3 2x"></a></li>';
											}												
											if($product['image3'] != 'thum_no_image.jpg')
											{
												echo '<li><a href="#"><img src="'.base_url('upload/image/products/'.$product['image3_thumb']).'" width="s-img3" alt="1144953 1 2x"></a></li><div class="clear"></div>';
											}												
										?>
									</ul>
								</div>
							</div>
						</div>
	            </div>
		         <div class="desc1 span_3_of_2">
		         	<h3 class="m_3"><?=$product['name'] ?></h3>
		             <p class="m_5"><?=$product['price'] ?> đ <!-- <span class="reducedfrom">99.000.000 đ</span> <a href="#">click for offer</a> --></p>
		         	 <div class="btn_form">
						<form>
							<input type="submit" value="MUA" title="">
						</form>
					 </div>
					<!-- <span class="m_link"><a href="#">Đăng nhập để lưu vào sản phẩm yêu thích</a> </span> -->
				     <p class="m_text2"><?=$product['desc'] ?></p>
			     </div>
			   <div class="clear"></div>	
	    <div class="clients">
	    <h3 class="m_3">Sản phẩm cùng loại</h3>
		 <ul id="flexiselDemo3">
		 	<?php
		 		foreach ($products as $product) 
		 		{		 			
					echo '<li><img src="'.base_url('upload/image/products/'.$product['thumb_slide2']).'" /><br/><a href="'.site_url('home/product_detail/'.$product['id']).'">'.substr($product['name'], 0, 5).'</a><p> '.$product['price'].' đ </p></li>';
				}
			?>
		 </ul>
	<script type="text/javascript">
		$(window).load(function() {
			$("#flexiselDemo1").flexisel();
			$("#flexiselDemo2").flexisel({
				enableResponsiveBreakpoints: true,
		    	responsiveBreakpoints: { 
		    		portrait: { 
		    			changePoint:480,
		    			visibleItems: 1
		    		}, 
		    		landscape: { 
		    			changePoint:640,
		    			visibleItems: 2
		    		},
		    		tablet: { 
		    			changePoint:768,
		    			visibleItems: 3
		    		}
		    	}
		    });
		
			$("#flexiselDemo3").flexisel({
				visibleItems: 5,
				animationSpeed: 1000,
				autoPlay: true,
				autoPlaySpeed: 3000,    		
				pauseOnHover: true,
				enableResponsiveBreakpoints: true,
		    	responsiveBreakpoints: { 
		    		portrait: { 
		    			changePoint:480,
		    			visibleItems: 1
		    		}, 
		    		landscape: { 
		    			changePoint:640,
		    			visibleItems: 2
		    		},
		    		tablet: { 
		    			changePoint:768,
		    			visibleItems: 3
		    		}
		    	}
		    });
		    
		});
	</script>
	<script type="text/javascript" src="<?=base_url($template_path.'js/jquery.flexisel.js') ?>"></script>
     </div>
     <div class="toogle">
     	<h3 class="m_3">Chi tiết</h3>
     	<p class="m_text"><?=$product['detail'] ?></p>
     </div>
     <div class="toogle">
     	<h3 class="m_3">Cách thức mua hàng</h3>
     	<p class="m_text">
     		<h4>Mua hàng trực tiếp tại thegioihandmade.site90.net</h4>
     		Quý khách có thể mua hàng trực tiếp tại hệ thống cửa hàng của thegioihandmade.site90.net :
			284/9 Nguyễn Trọng Tuyển, Tp HCM.
			Ưu Điểm : quý khách hàng có thể vừa xem tận mắt vừa sờ tận tay các sản phẩm của thegioihandmade.site90.net. Ngoài ra quý khách còn được tư vấn một cách nhiệt tình từ nhân viên của thegioihandmade.site90.net.			
			<h4>Mua hàng chỉ bằng một cuộc gọi đặt hàng</h4>
			Giờ đây, dù bạn ở bất cứ nơi nào, chỉ cần một  cuộc gọi điện đặt hàng tới số điện thoại: 0933 626 620 để cung cấp thông tin mua hàng như: Tên , địa chỉ, điện thoại, món hàng cần mua, số lượng. Chúng tôi sẽ giao hàng tận nơi theo yêu cầu của bạn trong trung tâm thành phố. Nếu các bạn ở tỉnh thành khác thì chúng tôi sẽ gửi bưu điện hay chành xe theo yêu cầu của bạn!
     	</p>
     </div>
      </div>
			<!-- <div class="rsingle span_1_of_single">
				<h5 class="m_1">Categories</h5>
					<select class="dropdown" tabindex="8" data-settings='{"wrapperClass":"metro"}'>
						<option value="1">Mens</option>
						<option value="2">Sub Category1</option>
						<option value="3">Sub Category2</option>
						<option value="4">Sub Category3</option>
					</select>
					<select class="dropdown" tabindex="8" data-settings='{"wrapperClass":"metro"}'>
						<option value="1">Womens</option>
						<option value="2">Sub Category1</option>
						<option value="3">Sub Category2</option>
						<option value="4">Sub Category3</option>
					</select>
					<ul class="kids">
						<li><a href="#">Kids</a></li>
						<li class="last"><a href="#">Glasses Shop</a></li>
					</ul>
                   <section  class="sky-form">
					<h4>Price</h4>
						<div class="row row1 scroll-pane">
							<div class="col col-4">
								<label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>Rs 500 - Rs 700</label>
							</div>
							<div class="col col-4">
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Rs 700 - Rs 1000</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Rs 1000 - Rs 1500</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Rs 1500 - Rs 2000</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Rs 2000 - Rs 2500</label>
								<label class="checkbox"><input type="checkbox" name="checkbox" ><i></i>Rs 2500 - Rs 3000</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Rs 3500 - Rs 4000</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Rs 4000 - Rs 4500</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Rs 4500 - Rs 5000</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Rs 5000 - Rs 5500</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Rs 5500 - Rs 6000</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Rs 6000 - Rs 6500</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Rs 6500 - Rs 7000</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Rs 7000 - Rs 7500</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Rs 7500 - Rs 8000</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Rs 8000 - Rs 8500</label>	
							</div>
						</div>
		        </section>
		       <section  class="sky-form">
					<h4>Brand Name</h4>
						<div class="row row1 scroll-pane">
							<div class="col col-4">
								<label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>John Jacobs</label>
							</div>
							<div class="col col-4">
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Tag Heuer</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Lee Cooper</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Mikli</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>S Oliver</label>
								<label class="checkbox"><input type="checkbox" name="checkbox" ><i></i>Hackett</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Killer</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>IDEE</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Vogue</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Gunnar</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Accu Reader</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>CAT</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Excellent</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Feelgood</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Odysey</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Animal</label>	
							</div>
						</div>
		       </section>
		       <section  class="sky-form">
					<h4>Frame Shape</h4>
						<div class="row row1 scroll-pane">
							<div class="col col-4">
								<label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>Pilot</label>
							</div>
							<div class="col col-4">
							    <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Rectangle</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Square</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Round</label>
								<label class="checkbox"><input type="checkbox" name="checkbox" ><i></i>Others</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Cat Eyes</label>
								<label class="checkbox"><input type="checkbox" name="checkbox" ><i></i>Wrap Around</label>
						    </div>
						</div>
		       </section>
		       <section  class="sky-form">
					<h4>Frame Size</h4>
						<div class="row row1 scroll-pane">
							<div class="col col-4">
								<label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>Small</label>
							</div>
							<div class="col col-4">
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Medium</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Large</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Medium</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Large</label>
							</div>
						</div>
		       </section>
		       <section  class="sky-form">
					<h4>Frame Type</h4>
						<div class="row row1 scroll-pane">
							<div class="col col-4">
								<label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>Full Rim</label>
							</div>
							<div class="col col-4">
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Rim Less</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Half Rim</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Rim Less</label>
								<label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Half Rim</label>
							</div>
						</div>
		       </section>
		       <section  class="sky-form">
					<h4>Colors</h4>
						<ul class="color-list">
							<li><a href="#"> <span class="color1"> </span><p class="red">Red</p></a></li>
							<li><a href="#"> <span class="color2"> </span><p class="red">Green</p></a></li>
							<li><a href="#"> <span class="color3"> </span><p class="red">Blue</p></a></li>
							<li><a href="#"> <span class="color4"> </span><p class="red">Yellow</p></a></li>
							<li><a href="#"> <span class="color5"> </span><p class="red">Violet</p></a></li>
							<li><a href="#"> <span class="color6"> </span><p class="red">Orange</p></a></li>
							<li><a href="#"> <span class="color7"> </span><p class="red">Gray</p></a></li>
					   </ul>
		       </section>
		       <script src="web/js/jquery.easydropdown.js"></script>
		      </div>
		      <div class="clear"></div>
			</div> -->
			 <div class="clear"></div>
		   </div>
		</div>